<template>
    <div>
        <div class="box">
            <div class="top">
                <el-input  placeholder="请输入姓名" v-model="from.rname" />
                <el-input  placeholder="手机号" v-model="from.mobile"/>
                <el-input v-model="input" placeholder="请输入ip" />
                <el-select v-model="value" class="m-2" placeholder="请选择定位">
                    <el-option
                    v-for="item in addlist"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                    />
                </el-select>    
                <el-cascader v-model="name" :options="departmentlist" @change="handleChange" placeholder="请选择部门" />
                <div class="block">
                    <el-date-picker
                        v-model="from.starttime	"
                        type="datetime"
                        placeholder="开始时间"
                    />
                </div>
                <div class="block">
                    <el-date-picker
                        v-model="from.endtime"
                        type="datetime"
                        placeholder="结束时间"
                    />
                </div>
            </div>
            <div class="botton">
              <el-button type="primary" @click="search">查询</el-button>
                <el-button type="success" @click="Add">添加</el-button>
                <el-button @click="derive">导出Excel</el-button>
            </div>
            <div class="list" >
              <!-- {{item.depid}} -->
                <el-table :data="tracklist" border style="width: 100%"  >
                    <el-table-column prop="address" label="定位" width="180" />
                    <el-table-column prop="name" label="姓名" width="180" />
                    <el-table-column prop="depid" label="部门" />
                    <el-table-column prop="mobile" label="手机号" />
                    <el-table-column prop="address" label="ip" />
                    <el-table-column prop="addtime" label="时间" />
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="page">
              <el-config-provider :locale="zhCn">
                    <el-pagination
                    v-model:currentPage="from.page"
                    v-model:page-size="from.pageSize"
                    :page-sizes="[5, 10, 15, 18]"
                    
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
                </el-config-provider>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref,toRefs ,onMounted} from 'vue'
import { ElMessage, Options } from 'element-plus'
import router from '../../router/router'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
// 接口
import {  trackList} from "../../api/track/index";//轨迹列表
import { addressList ,departmentList} from "../../api/track/index";//定位列表
import * as XLSX from "xlsx";  // 导出文件


let token=localStorage.getItem('token');

const input = ref('')
const value = ref('')
const value1 = ref('')
const name = ref([])
const defaultTime = new Date(2000, 1, 1, 12, 0, 0)


const currentPage4 = ref(4)
// const pageSize4 = ref(100)
const small = ref(false)

let total=ref(0)//页数

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  getTracklist()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  getTracklist()
}

const handleChange = (name:any) => {
  console.log(name)
}
  


const departmentlist = [
{
    value: 'guide',
    label: '京管保卫处'
  },
  {
    value: 'component',
    label: '京管校本部',
    children: [
      {
        value: 'basic',
        label: '学生招办',
        children: [
          {
            value: 'layout',
            label: '西楼',
          }
        ],
      },
      {
        value: 'form',
        label: '学生处',
        children: [
          {
            value: 'radio',
            label: '教育处',
          }
        ],
      },
      {
        value: 'data',
        label: '123'
      },
      {
        value: 'notice',
        label: '总务处'
      },
      {
        value: 'navigation',
        label: '工程部'
      },
      {
        value: 'others',
        label: '教务处'
      },
    ],
  },
  {
    value: 'resource',
    label: '合作单位',
    children: [
      {
        value: 'axure',
        label: '乐宁教育',
        children: [
          {
            value: 'layo',
            label: '老胖洗浴中心',
          }
        ],
      },
      {
        value: 'sketch',
        label: '中科青云',
      },
      {
        value: 'docs',
        label: '临川国际',
      },
      {
        value: 'docs2',
        label: '临川国际',
      },
      {
        value: 'docs3',
        label: '蓝基因',
      },
      {
        value: 'docs4',
        label: '北大青鸟',
      },
      {
        value: 'docs5',
        label: '航空培训',
      },
    ],
  },
]



onMounted(()=>{
    getTracklist()
    getAddressList()
    getDepartmentlist()
     
    })

// 接口数据
const data=reactive({
    from:{
        page:1,
        pageSize:10,
        rname:'',
        name:'',//id 名称
        mobile:'',//电话
        starttime:'',//开始时间
        endtime:'',//结束时间
        Authorization:token
    }
})
const { from } = toRefs(data)
let tracklist:any=reactive([])//管理列表
// 请求轨迹管理列表
const getTracklist = async () => { 

const res: any = await trackList(data.from)
// console.log('res',res)
if (res.code === '00000') {
  tracklist.length = 0
  tracklist.push(...res.data)
  total.value=res.total
} 
}

let addlist=ref()//点位列表 
//请求点位列表 
const getAddressList = async () => { 
  const res: any = await addressList(data.from)
  // console.log('res',res)
if (res.code === '00000') {
  
  addlist.value=res.data

} 
}

// let departmentlist=ref([])
// 请求部门列表
const getDepartmentlist=async()=>{
  const res:any=await departmentList(data.from)
  console.log('res',res);
  departmentlist.values=res.data
  
}

// 查询
const search=()=>{
  getTracklist()
}

// 导出
const derive=()=>{
   // 1.创建工作表
   let data = XLSX.utils.json_to_sheet(tracklist)
  // 2.创建工作簿
  let wb = XLSX.utils.book_new()
  // 3.把工作表放到工作簿中
  XLSX.utils.book_append_sheet(wb,data,"data")
  // 4.生成文件并下载
  XLSX.writeFile(wb,'轨迹管理.xlsx')
}

// 添加
const Add=()=>{
  router.push('/trackadd')
}
</script>

<style lang="less" scoped>
.box{
    margin: 0 auto;
    .top{
        display: flex;
        width: 1500px;
        // height: 200px;
        .el-input{
          width: 155px;
            margin: 0 5px;
        }
        .m-2{
            width: 150px;
            margin: 0 5px;
        }
        .el-button{
            margin: 0 5px;
        }
        .el-cascader{
          width: 9000px;
        }
    }
    .botton{
        margin: 10px;
    }
}
.page{
  width: 700px;
  margin: 0 auto;
}
</style>